<!--
 * @Description: 内环饼图
 * @Author: wang_k
 * @Date: 2023-12-28 18:13:10
 * @LastEditTime: 2023-12-29 10:32:01
 * @FilePath: /demo_important/src/views/Echarts/components/InnerRingEcharts/InnerRingEcharts.vue
-->
<template>
  <div>
    <div
      class="inner-ring"
      ref="InnerRingEcharts"
      style="width: 400px; height: 400px"
    ></div>
    <div
      id="Circlechart"
      style="width: 400px; height: 400px"
    ></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { Pie } from "./utils"
export default {
  name: 'InnerRingEcharts',
  components: {

  },
  props: {

  },
  data() {
    return {

    };
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {
    this.init();
    this.Circlelinechart()
  },
  methods: {
    init() {
      const myCharts = echarts.init(this.$refs.InnerRingEcharts);

      let dataList = [
        {
          value: 75,
          show: true,
          name: '已修改',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(38, 243, 251, 0)'
                },
                {
                  offset: 1,
                  color: 'rgba(38, 243, 251, 1)'
                }
              ])
            },
          }
        },
        {
          value: 30,
          show: true,
          name: '待修改',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(221, 115, 108, 0)'
                },
                {
                  offset: 1,
                  color: 'rgba(221, 115, 108, 1)'
                }
              ])
            }
          }
        },
        {
          value: 30,
          show: true,
          name: '已通过',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                {
                  offset: 0,
                  color: 'rgba(150, 233, 177, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(150, 233, 177, 1)'
                }
              ])
            }
          }
        },
      ]

      let option = {
        // backgroundColor: 'rgba(34, 45, 66, 0.49)',
        series: [
          {
            name: '学历',
            type: 'pie',
            radius: [100, 116],
            center: ['50%', '50%'],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
              show: true,
              // position: 'center'
            },
            itemStyle: {
              borderRadius: 5,
              borderColor: 'transparent',
              borderWidth: 12
            },
            emphasis: {
              label: {
                show: true
              }
            },
            labelLine: {
              show: true
            },
            data: dataList
          },
          {
            name: '外边框',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['50%', '50%'],
            radius: ['45%', '45%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 9,
              name: '',
              itemStyle: {
                normal: {
                  borderWidth: 2,
                  // borderColor: '#000',
                  borderColor: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(38, 243, 251, 0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(38, 243, 251, 1)'
                    }
                  ])
                }
              }
            },
            {
              value: 9,
              name: '',
              itemStyle: {
                normal: {
                  borderWidth: 2,
                  // borderColor: '#000',
                  borderColor: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(221, 115, 108, 1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(221, 115, 108, 0)'
                    }
                  ])
                }
              }
            }
            ]
          },
          {
            type: 'pie',
            radius: ['50', '75'],
            label: {
              show: false
            },
            data: Pie()
          },
        ]
      }

      myCharts.setOption(option);
    },
    Circlelinechart() {
      let myChart = echarts.init(document.getElementById("Circlechart"));
      let option = {
        color: ['#23649e', '#2e7bad', '#1dc499', '#4da7c1', '#65b5c2', "rgba(250,250,250,0.3)"],
        grid: {
          left: 0,
          // right: 0,
          bottom: 0,
          top: 0,
          containLabel: true
        },
        // grid: {
        //     bottom: 150,
        //     left: 100,
        //     right: '10%'
        // },
        legend: {
          orient: 'vertical',
          top: "middle",
          right: "12%",
          textStyle: {
            color: '#788288',
            fontSize: 13,
          },
          icon: 'roundRect',
          data: [{ "name": "1", "value": 10 },
          { "name": "2", "value": 10 },
          { "name": "3", "value": 10 },
          { "name": "4", "value": 10 },
          { "name": "5", "value": 10 },],
        },
        series: [
          // 主要展示层的
          {
            radius: ['30%', '61%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: true,
                formatter: "{c}%",
                textStyle: {
                  fontSize: 13,
                },
                position: 'outside'
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 35
              },
              emphasis: {
                show: true
              }
            },
            name: "民警训练总量",
            data: [{ "name": "1", "value": 10 },
            { "name": "2", "value": 10 },
            { "name": "3", "value": 10 },
            { "name": "4", "value": 10 },
            { "name": "5", "value": 10 },],
          },
          // 边框的设置
          {
            radius: ['30%', '34%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            data: [{
              value: 1,
              itemStyle: {
                color: "rgba(250,250,250,0.3)",
              },
            }],
          },
          {
            name: '外边框',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['50%', '50%'],
            radius: ['65%', '65%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 9,
              name: '',
              itemStyle: {
                normal: {
                  borderWidth: 2,
                  borderColor: '#61bad3'
                }
              }
            }]
          },
        ]
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.inner-ring {
  width: 460px;
  height: 516px;
  /* color: transparent; */
  background: rgba(34, 45, 66, 0.49);
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  border: 1px solid rgba(187, 221, 255, 0.66);
}
</style>
